<template>
  <div class="tunnel-container">
    <div class="tunnel-list">
      <h3>选择断面</h3>
      <el-tree
          style="max-width: 600px"
          lazy
          :load="loadNode"
          :props="defaultProps"
          @node-click="handleNodeClick"
      />
    </div>
    <div class="tunnel-content">
      <el-table :data="tunnelContent.data" style="width: 100%">
        <el-table-column prop="id" label="序号"/>
        <el-table-column prop="tunnelname" label="隧道名称"/>
        <el-table-column prop="imagename" label="图名"/>
        <el-table-column prop="num" label="图号"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="preViewHandler(scope.$index,scope.row)">预览</el-button>
            <el-button size="small" type="success" @click="updateHandler(scope.$index,scope.row)">上传</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!--上传对话框-->
  <el-dialog
      v-model="dialogUploadVisible"
      title="上传文件"
      center
      width="500"
      destroy-on-close
  >
    <el-upload :on-success="handlePDFSucess" class="upload" v-model:file-list="fileList"
               action="http://localhost:3030/api/upload" limit="1" :on-exceed="handleExceed">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUploadVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogUploadVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import api from "@/api/index";
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";

const router=useRouter()
const tunnelContent = reactive({
  data: []
})
const fileList = ref([])
const dialogUploadVisible = ref(false)
const currentId = ref(0)
const handleNodeClick = (data) => {
  api.getTunnelContent({content: data.content}).then(res => {
    if (res.status === 200) {
      tunnelContent.data = res.result
    } else {
      tunnelContent.data = []
    }
  })
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
const loadNode = (node, resolve) => {
  //一级节点
  if (node.level === 0) {
    api.getTunnelList().then(res => {
      if (res.status === 200) {
        resolve(res.result)
      }
    })
  }
  //二级节点
  if (node.level === 1) {
    api.getTunnelChild({cid: node.data.cid}).then(res => {
      if (res.status === 200) {
        resolve(res.result)
      } else {
        resolve([])
      }
    })
  }
  //大于二级节点
  if (node.level > 1) {
    resolve([])
  }
}
/**
 * 预览
 */
const preViewHandler = (index, row) => {
  router.push({
    path:'/pdf',
    query:{
      id:row.id
    }
  })
}
/**
 * 上传
 */
const updateHandler = (inex, row) => {
  currentId.value = row.id
  dialogUploadVisible.value = true
}
/**
 * 上传文件超出
 */
const handleExceed = () => {

}

/**
 * 上传成功回调
 */
const handlePDFSucess = (response, updatafile,) => {
  api.getUploadTunnelContent({
    id: currentId.value,
    urlName: response.url.substr(7)
  }).then(res => {
    console.log(res)
  })
}
</script>

<style lang="scss" scoped>
.tunnel-container {
  display: flex;

  .tunnel-list {
    width: 250px;
    background-color: #fff;
    padding: 10px;
    margin-right: 20px;

    h3 {
      font-size: 15px;
      font-weight: 700;
      margin: 10px 0;
    }
  }

  .tunnel-content {
    flex: 1;
  }
}

.upload {
  display: inline-block;
}
</style>